<template>
  <div class="newinfo">
    <!-- 标题 -->
    <h1 class="title">{{newinfo.title}}</h1>
    <p>
      <span>发表时间:{{newinfo.add_time | timeFormat}}</span>
      <span>点击:{{newinfo.click}}</span>
    </p>
    <hr>
    <!-- 主要内容 -->
    <div v-html="newinfo.content"></div>

    <!-- 发表评论 -->
    <comment :id="this.id"></comment>
  </div>
</template>

<script>
import comment from "../subComponents/comment.vue";
export default {
  data(){
    return {
      id:this.$route.params.id,
      newinfo:[]
    }
  },
  created(){
    this.getnewinfo();
  },
  methods:{
    // 获取新闻详细内容的请求
    getnewinfo(){
      this.$http.get("http://www.liulongbin.top:3005/api/getnew/"+this.id).then((result)=>{
        if(result.body.status==-0){
          this.newinfo=(result.body.message)[0];
        }else{
          console.log("数据请求失败");
        }
      })
    }
  },
  // 注册一个私有组件
  components:{
    "comment":comment,
  }
}
</script>

<style lang="scss" scoped>
  .newinfo{
    padding: 0px 4px;
    .title{
      color: red;
      font-size:14px;
      text-align: center;
      line-height: 30px;
    }
    p{
      color:skyblue;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }
  }
</style>
